<template>
	<view class="page">
		<view class="parent">
			<view class="top">
				<image src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/info_back.png" @click="onBack"></image>
				<image src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/info_more.png" 
				style="margin-right: 50rpx;" @click="toUserEdit" v-if="isSelf"></image>
			</view>

			<scroll-view scroll-y class="content">
				<!-- 轮播图 -->
				<swiper class="banner" circular autoplay="true" indicator-dots="true">
					<swiper-item v-for="(item, index) in banners" :key="index">
						<image width="100%" height="100%" :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>

				<view class="main">
					<!-- 用户信息 -->
					<view class="info">
						<view class="info-top">
							<view class="nick"> {{user.nick}} </view>
							<image class="sex"
								src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/ic_gril.png"
								mode="aspectFill" v-if="2==user.sex"></image>
								<image class="sex"
									src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/ic_boy.png"
									mode="aspectFill" v-if="1==user.sex"></image>
							<view class="age">{{user.age}}岁</view>
							<image class="zhenren"
								src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/test/ic_zhenren_gril.png"
								mode="heightFix" v-if="1==user.status"></image>
						</view>
						<view class="content">{{getInfo()}}</view>
					</view>
					<!-- 微信 -->
					<view class="wechat">
						<image class="wechat-bg"
							src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/test/info_wechat_bg.png">
						</image>
						<view class="wechat-content">
							<view class="wechat-left">
								<view class="wechat-title">微信号：{{wechat}}</view>
								<view class="wechat-sub-tiltle">解锁TA的微信快速私聊</view>
							</view>
							<view class="wechat-btn" @click="openWechat">解锁</view>
						</view>
					</view>
					<!-- Ta的相册 -->
					<view class="photo">
						<view class="photo-top">
							<view class="label">TA的相册</view>
							<image class="arrow" src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/ic_arrow_rightpng.png"></image>
						</view>
						<scroll-view :scroll-x="true" class="photo-image">
							<image v-for="(item, index) in banners" :key="index" :src="item" @click="onPreviewImage(banners, index)"></image>
						</scroll-view>
					</view>
					<!-- 期待的关系 -->
					<view class="relation">
						<view class="label">期待的关系</view>
						<view class="tag">
							<view class="btn" v-for="(item, index) in tagList" :key="index">{{item}}</view>
						</view>
					</view>
					<!-- TA的标签 -->
					<view class="tags">
						<view class="label">TA的标签</view>
						<view class="tag">
							<!-- <view class="btn">萌萌哒</view> -->
							<view class="btn" v-for="(item, index) in tagList" :key="index">{{item}}</view>
						</view>
					</view>
					<!-- TA的签名 -->
					<view class="sign">
						<view class="label">TA的签名</view>
						<view class="content">{{user.mysign || '我很懒，什么都没有留下！'}}</view>
					</view>
				</view>
			</scroll-view>


			<view class="bottom" v-if="!isSelf">
				<view class="item" @click="toChat">
					<image src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/info_wechat.png">
					</image>
					<view class="title">聊一聊</view>
				</view>
				<view class="item message" @click="toChat">
					<image src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/info_message.png">
					</image>
					<view class="title message">私信</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="vip"  type="bottom">
			<view class="popup-vip">
				<image class="avatar" :src="user.pic"></image>
				<view class="title">解锁聊天</view>
				<view class="btn" @click="toVip">开通会员获得特权</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userId: '',
				user: {},
				isSelf: false,
				tagList: [],
				banners: [],
				dynamicImages: [],
				tagColor: ['tag-blue', 'tag-green', 'tag-yellow', 'tag-pink'],
				wechat: '*******'
			}
		},
		onLoad(option) {
			if (option) {
				this.userId = option.userid;
				console.log("this.userId: " + JSON.stringify(this.userId));
				this.getUser();
				this.my = option.my;
				if(1== option.my){
					this.isSelf = true;
				}
				// this.requestDynamic(this.userId);
			}
		},
		methods: {
			async getUser() {
				let params = {
					userid: this.userId
				};
				let res = await this.$c.post('/app/user/lookTinfo', params);
				if (0 == res.code) {
					this.user = res.data;
					this.tagList = this.user.biaoqianList;
					if (this.user.xingxiang) {
						let xingxiang = this.user.xingxiang;
						if (xingxiang.charAt(xingxiang.length - 1) === ',') {
							xingxiang = xingxiang.slice(0, -1);
						}
						this.banners = xingxiang.split(',');
					} else {
						this.banners.push(this.user.pic);
					}
					console.log("this.user: " + JSON.stringify(this.user));
					if(this.user.weChatNum && this.user.weChatNum.length > 4){
						this.wechat = this.replaceMiddle(this.user.weChatNum);
						// this.wechat = this.user.weChatNum.replace(this.user.weChatNum.substring(2, this.user.weChatNum.length-2), '*');
					}
				}
			},
			getInfo(){
				let info = this.user.age + "岁";
				if(this.user.shengao){
					info += " | "+this.user.shengao;
				}
				if(this.user.tizhong){
					info += " | "+this.user.tizhong;
				}
				if(this.user.zhiyename){
					info += " | "+this.user.zhiyename;
				}
				if(this.user.address){
					info += " | 来自"+this.user.address;
				}
				return info;
			},
			onPreviewImage(list, index) {
				uni.previewImage({
					urls: list,
					current: index,
					fail: (error) => {
						console.log("error: " + JSON.stringify(error));
					}
				})
			},
			toChat() {
				uni.navigateTo({
					url: `/im/chat/chat?userid=` + this.userId + `&conversationID=C2C` + this.user.tengxuncode,
				});
			},
			async openWechat(){
				let res = await this.$c.post('/app/usermessage/getMessage');
				if(0 == res.code){
					if(1 == res.data.vipMap.isVip){
						this.wechat = this.user.weChatNum;
						if(!this.wechat){
							this.wechat = '未填写'
						}
					}else{
						this.$refs.vip.open()
					}
				}
				// const vip = this.user.vipMap.isVip;
				// if(1==vip){
				// 	this.wechat = this.user.weChatNum;
				// 	if(!this.wechat){
				// 		this.wechat = '未填写'
				// 	}
				// }else{
				// 	this.$refs.vip.open()
				// }
			},
			toVip(){
				this.$refs.vip.close()
				uni.navigateTo({
					url:'/pages/m-pages/m-vip/index'
				})
			},
			onBack(){
				uni.navigateBack();
			},
			toUserEdit(){
				uni.navigateTo({
					url:'/pages/m-pages/m-userinfos/index'
				})
			},
			replaceMiddle(str){
				var len = str.length;
				if (len <= 4) {
				    return "*";
				} else {
					var regex = /^(.{0,2}).*?(.{2})$/; // 匹配字符串的前两位和最后2位
					return str.replace(regex, "$1*****$2")
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.parent {
		display: flex;
		flex-direction: column;
		width: 100wh;
		height: 100vh;
		box-sizing: border-box;
		
		.top {
			z-index: 2;
			position: fixed;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			top: var(--status-bar-height);
			width: 95%;
			height: 80rpx;
			margin-left: 50rpx;
			margin-right: 50rpx;
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
		
		.content {
			position: relative;
			flex: 1;
			display: flex;
			flex-direction: column;
		
			.banner {
				width: 100%;
				height: 750rpx;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
			.main {
				position: absolute;
				top: 670rpx;
				left: 0;
				right: 0;
				display: flex;
				flex-direction: column;
				margin: 0 50rpx;
				// 用户信息
				.info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 30rpx;
					background-color: #100e0f;
					opacity: 0.5;
					border-radius: 15rpx;
					width: 100wh;
		
					.info-top {
						display: flex;
						flex-direction: row;
						align-items: center;
		
						.nick {
							font-size: 36rpx;
							color: #fff;
						}
		
						.sex {
							margin-left: 10rpx;
							width: 30rpx;
							height: 30rpx;
						}
		
						.age {
							margin-left: 10rpx;
							font-size: 24rpx;
							color: #fff;
						}
		
						.zhenren {
							margin-left: 10rpx;
							height: 30rpx;
						}
					}
		
					.content {
						margin-top: 15rpx;
						font-size: 24rpx;
						color: #fff;
					}
				}
				// 微信
				.wechat {
					margin-top: 10rpx;
					position: relative;
					height: 130rpx;
					box-sizing: border-box;
					.wechat-bg {
						width: 100%;
						height: 100%;
					}
					.wechat-content {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						padding: 20rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: row;
						align-items: center;
						.wechat-left {
							display: flex;
							flex-direction: column;
							flex: 1;
							margin-left: 50rpx;
							.wechat-title {
								font-size: 36rpx;
								color: #5b2a09;
								margin-bottom: 10rpx;
							}
							.wechat-sub-tiltle {
								font-size: 28rpx;
								color: #5b2a09;
							}
						}
					}
					.wechat-btn {
						width: 150rpx;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;
						background-color: #fff0db;
						border: 1px solid #caa579;
						border-radius: 10rpx;
						font-size: 28rpx;
						color: #3f1e0f;
					}
				}
		
				//他的相册
				.photo {
					margin-top: 30rpx;
					display: flex;
					flex-direction: column;
		
					.photo-top {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						height: 40rpx;
		
						.arrow {
							width: 30rpx;
							height: 30rpx;
						}
					}
		
					.photo-image {
						white-space: nowrap;
						margin-top: 15rpx;
		
						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 10rpx;
							margin-right: 15rpx;
						}
					}
				}
		
				// 期待的关系
				.relation {
					margin-top: 30rpx;
					display: flex;
					flex-direction: column;
		
					.tag {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						margin-top: 15rpx;
		
						.btn {
							font-size: 24rpx;
							color: #999093;
							background-color: #433d3f;
							border-radius: 5rpx;
							padding: 10rpx 15rpx;
							margin: 10rpx;
						}
					}
				}
		
				//TA的标签
				.tags {
					margin-top: 30rpx;
					display: flex;
					flex-direction: column;
		
					.tag {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						width: 100%;
						margin-top: 15rpx;
		
						.btn {
							font-size: 24rpx;
							color: #999093;
							background-color: #433d3f;
							border-radius: 5rpx;
							padding: 10rpx 15rpx;
							margin: 10rpx;
						}
					}
				}
		
				//TA的签名
				.sign {
					margin-top: 30rpx;
					display: flex;
					flex-direction: column;
		
					.content {
						font-size: 24rpx;
						color: #82797a;
						margin: 15rpx 15rpx 0;
					}
				}
		
			}
		
		}
		
		.bottom {
			width: 100%;
			height: 120rpx;
			padding: 20rpx 50rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			z-index: 99;
		
			.item {
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin: 15rpx;
				height: 100%;
				box-sizing: border-box;
				border-radius: 100rpx;
				background-color: #0bc852;
		
				image {
					width: 30rpx;
					height: 30rpx;
				}
		
				.title {
					font-size: 24rpx;
					color: #e5fff2;
				}
				.message {
					color: #511f00;
				}
			}
		
			.message {
				background-color: #edaf74;
			}
		}
		
	}

	.label {
		font-size: 36rpx;
		color: #c5bfc1;
	}

	
	// vip弹窗
	.popup-vip{
			width: 100wh;
			height: 500rpx;
			background-color: #282828;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 50rpx;
			
			.avatar{
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				margin-top: 50rpx;
			}
			
			.title{
				margin-top: 50rpx;
				font-size: 36rpx;
				color: #f6f6f6;
			}
			
			.btn{
				margin-top: 50rpx;
				font-size: 36rpx;
				color: #f6f6f6;
				background-color: #eaa268;
				border-radius: 50rpx;
				height: 100rpx;
				line-height: 100rpx;
				width: 100%;
				text-align: center;
			}
		}
	
</style>